<template>
  <div ref="radarRef" class="radar-chart"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Object,
    required: true // { labels: [], values: [] }
  }
})

const radarRef = ref(null)
let chart = null

const renderChart = () => {
  if (!radarRef.value) return
  
  if (!chart) {
    chart = echarts.init(radarRef.value)
  }
  
  const option = {
    tooltip: {},
    radar: {
      indicator: props.data.labels.map((label) => ({ name: label, max: 100 })),
      splitNumber: 4,
      radius: '65%',
      center: ['50%', '55%'],
      name: {
        textStyle: {
          color: '#333',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#ddd']
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(250,250,250,0.3)', 'rgba(245,245,245,0.3)']
        }
      },
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      }
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: props.data.values,
          name: '能力评分',
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 2,
            color: '#8086fd'
          },
          areaStyle: {
            color: 'rgba(128, 134, 253, 0.2)'
          }
        }
      ]
    }]
  }
  
  chart.setOption(option)
}

onMounted(() => {
  renderChart()
  
  // 添加窗口大小变化的监听
  window.addEventListener('resize', () => {
    if (chart) {
      chart.resize()
    }
  })
})

// 监听数据变化重新渲染图表
watch(() => props.data, () => {
  renderChart()
}, { deep: true })

// 组件卸载时清理资源
const unmountedCb = () => {
  if (chart) {
    chart.dispose()
    chart = null
  }
  window.removeEventListener('resize', chart.resize)
}
</script>

<style scoped>
.radar-chart {
  width: 100%;
  height: 100%;
}
</style> 